<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript"
            th:src="@{/static/js/jquery-1.12.4.min.js}"></script>
    <link
            th:href="@{/static/bootstrap-3.3.7-dist/css/bootstrap.min.css}"
            rel="stylesheet">
    <script
            th:src="@{/static/bootstrap-3.3.7-dist/js/bootstrap.min.js}"></script>
</head>
<body>
<!--列表-->
<!--<table width="800px" id="dataTable" border="2" cellspacing="0" cellpadding="0" style="text-align:center;">-->
<!--    <tr>-->
<!--        <th>工号</th>-->
<!--        <th>姓名</th>-->
<!--        <th>邮箱</th>-->
<!--        <th>性别</th>-->
<!--        <th>部门</th>-->
<!--        <th>操作</th>-->
<!--    </tr>-->
<!--    <tr th:each="emp : ${pageInfo.list}">-->
<!--        <th th:text="${emp.empId}">工号</th>-->
<!--        <th th:text="${emp.empName}">姓名</th>-->
<!--        <th th:text="${emp.email}">邮箱</th>-->
<!--        <th th:text="${emp.gender}">性别</th>-->
<!--        <th th:text="${emp.department.deptName}">部门</th>-->
<!--        <td>-->
<!--            <a @click="deleteEmployee" th:href="@{'/employee/'+${employee.id}}">delete</a>-->
<!--            <a th:href="@{'/employee/'+${employee.id}}">update</a>-->
<!--        </td>-->
    </tr>
</table>
<!-- 搭建显示页面 -->
<div class="container">
    <!-- 标题 -->
    <div class="row">
        <div class="col-md-12">
            <h1>SSM-CRUD</h1>
        </div>
    </div>
    <!-- 按钮 -->
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-primary">新增</button>
            <button class="btn btn-danger">删除</button>
        </div>
    </div>
    <!-- 显示表格数据 -->
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover">
                <tr>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>性别</th>
                    <th>部门</th>
                    <th>操作</th>
                </tr>
                <tr th:each="emp : ${pageInfo.list}">
                    <th th:text="${emp.empId}">工号</th>
                    <th th:text="${emp.empName}">姓名</th>
                    <th th:text="${emp.email}">邮箱</th>
                    <th th:text="${emp.gender==0?'女':'男'}">性别</th>
                    <th th:text="${emp.department.deptName}"></th>
                        <th>
                            <button class="btn btn-primary btn-sm">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                编辑
                            </button>
                            <button class="btn btn-danger btn-sm">
                                <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                删除
                            </button>
                        </th>
                    </tr>
            </table>
        </div>
    </div>

    <!-- 显示分页信息 -->
    <div class="row">
        <!--分页文字信息  -->
        <div class="col-md-6">当前 <span th:text="${pageInfo.pageNum}"></span>页,总<span th:text="${pageInfo.pages}"></span>
            页,总 <span th:text="${pageInfo.total}"></span>条记录</div>
        <!-- 分页条信息 -->
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li><a th:href="@{/emps/1}">首页</a></li>
                        <li th:if="${pageInfo.hasPreviousPage}"><a th:href="@{'/emps/'+${pageInfo.pageNum-1}}"
                               aria-label="Previous"> <span aria-hidden="true">&laquo;</span>
                        </a></li>
                    <li th:each="num : ${pageInfo.navigatepageNums}">
<!--                        <a th:text="${num}"></a>-->
<!--                        <a th:text="${num}" th:href="@{'/emps/'+${num}}"></a>-->

                        <a th:text="${num}" th:href="${num}==${pageInfo.pageNum}?'#':@{'/emps/'+${num}}"></a>
<!--                        <th th:text="${emp.gender==0?'女':'男'}">性别</th>-->

                    </li>
<!--                    <c:forEach items="${pageInfo.navigatepageNums }" var="page_Num">-->
<!--                        <c:if test="${page_Num == pageInfo.pageNum }">-->
<!--                            <li class="active"><a href="#" th:text="${pageInfo.pageNum}"></a></li>-->
<!--                        </c:if>-->
<!--                        <c:if test="${page_Num != pageInfo.pageNum }">-->
<!--                            <li><a href="${APP_PATH }/emps?pn=${page_Num }">${page_Num }</a></li>-->
<!--                        </c:if>-->

<!--                    </c:forEach>-->
                    <li th:if="${pageInfo.hasNextPage}"><a th:href="@{'/emps/'+${pageInfo.pageNum+1}}"
                                                               aria-label="Previous"> <span aria-hidden="true">&raquo;</span>
                    </a></li>
                    <li><a th:href="@{'/emps/'+${pageInfo.pages}}">末页</a></li>
                </ul>
            </nav>
        </div>
    </div>

</div>
</body>
</html>